<template>
  <div>
    <div class="container pt-5">
      <div class="row school-info mb-5">
        <div class="col-md-4 text-center">
          <img src="../assets/images/address.png" class="img-responsive mb-3" alt />
          <p class="fs-20">地址</p>
          <p class="fs-14">辽宁省沈阳市沈北新区辉山大街176号（北校区）</p>
        </div>
        <div class="col-md-4 text-center">
          <img src="../assets/images/phone.png" class="img-responsive mb-3" alt />
          <p class="fs-20">电话</p>
          <p class="fs-14">024-62639888</p>
        </div>
        <div class="col-md-4 text-center">
          <img src="../assets/images/address.png" class="img-responsive mb-3" alt />
          <p class="fs-20">地址</p>
          <p class="fs-14">辽宁省沈阳市于洪区沙岭街道文沙街银岭路（西校区）</p>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="map w-100 mb-5">
            <baidu-map
              class="bmView"
              :scroll-wheel-zoom="true"
              :center="{lng:123.461276,lat:41.817568}"
              :zoom="zoom"
              ak="fdptdGdfBqO7aAa2eS58a0zBYVmWIf5o"
            >
              <bm-view style="width: 100%; min-height:400px; flex: 1"></bm-view>
              <bm-marker :position="location" :dragging="true" @click="infoWindowOpen">
               <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">辽宁省沈阳市于洪区沙岭街道文沙街银岭路（西校区）</bm-info-window>
              </bm-marker>
              <bm-marker :position="locationTwo" :dragging="true" @click="infoWindowOpenTwo">
               <bm-info-window :show="showTwo" @close="infoWindowCloseTwo" @open="infoWindowOpenTwo">辽宁省沈阳市沈北新区辉山大街176号（北校区）</bm-info-window>
              </bm-marker>
            </baidu-map>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmView from "vue-baidu-map/components/map/MapView.vue";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow';

export default {
  components: {
    BaiduMap,
    BmView,
    BmMarker,
    BmInfoWindow
  },
  data() {
    return {
      zoom: 10,
      location: {
        lng: 123.191941,
        lat: 41.786135
      },
      locationTwo: {
        lng: 123.593884,
        lat: 41.952088
      },
      show: false,
      showTwo: false
    };
  },
  methods: {
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
      console.log(this.show);
      
    },
    infoWindowCloseTwo () {
      this.showTwo = false
    },
    infoWindowOpenTwo () {
      this.showTwo = true
      
    }
  }
};
</script>

<style lang="scss">
@media screen and (max-width:768px) {
  .school-info {
    img {
      width: 1.75rem;
      height: auto;
    }
  }
}
.school-info {
  .col-md-4:nth-child(2) {
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
}
.map {
  min-height: 400px;
}
</style>